import ChatCard from "./components/chatCard";
import ChatContent from "./components/chatContent";
import AITranslation from "./components/AITranslation";
import { useState } from "react";
import AIReading from "./components/AIReading";
import HelpWrite from "./components/helpWrite";
import ImageGeneration from "./components/ImageGeneration";
import AIInput from "./components/AIInput";
import Link from "../../assets/sendChat/1.png";
import Img from "../../assets/sendChat/4.png";
import Crop from "../../assets/sendChat/3.png";
import "./components/index.css";
import { Tooltip } from "antd";
import Program from "./components/program";
const Chat = () => {
  const [cardIndex, setCardIndex] = useState(0);
  return (
    <>
      <ChatContent />
      <div className="absolute bottom-12 w-1/2">
        {cardIndex == 0 && (
          <>
            <ChatCard actions={(index: number) => setCardIndex(index)} />
            {/* <SendCom /> */}
            <div className="h-12 rounded-2xl border-gray-black border flex overflow-hidden relative items-center">
              <AIInput
                placeholder="发送消息、输入@或/选择技能"
                toolRight={
                  <div className="flex">
                    <Tooltip
                      placement="top"
                      title={customContent}
                      color="#fff"
                      overlayInnerStyle={{
                        color: "rgba(51, 51, 51, 1)", // 设置字体颜色为深灰色，可按需修改
                      }}
                    >
                      <img src={Link} alt="" className="w-4 h-4 mr-1" />
                    </Tooltip>
                    <img src={Img} alt="" className="w-4 h-4 mr-1" />
                    <img src={Crop} alt="" className="w-4 h-4 mr-1" />
                  </div>
                }
              />
            </div>
          </>
        )}
        {cardIndex == 1 && <AITranslation resetIndex={() => setCardIndex(0)} />}
        {cardIndex == 2 && <AIReading resetIndex={() => setCardIndex(0)} />}
        {cardIndex == 4 && <HelpWrite resetIndex={() => setCardIndex(0)} />}
        {cardIndex == 5 && (
          <ImageGeneration resetIndex={() => setCardIndex(0)} />
        )}
        {cardIndex == 6 && <Program resetIndex={() => setCardIndex(0)} />}
      </div>
    </>
  );
};

const customContent = (
  <>
    <div>
      <div className="flex text-t-black">
        <div className="w-1 h-1 bg-t-black rounded-full mr-1.5 mt-2"></div>
        文件数量：最多 50 个
      </div>
      <div className="ml-2.5">图片数量：最多 10</div>
    </div>
    <div>
      <div className="flex text-t-black">
        <div className="w-1 h-1 bg-t-black rounded-full mr-1 mt-2"></div>
        个文件类型：pdf、txt、csv、docx、
      </div>
      <div className="ml-2.5">doc、xlsx、xls、pptx、ppt、mobi、</div>
      <div className="ml-2.5">epub、png、jpeg、jpg</div>
    </div>
    <div>
      <div className="flex text-t-black">
        <div className="w-1 h-1 bg-t-black rounded-full mr-1.5 mt-2"></div>
        代码文件：py、java、js、ts等类型
      </div>
    </div>
  </>
);
export default Chat;
